<template>
	<view id="mePage">
		<view class="jumbo">
			<view class="jumbo-header">
				<view class="avatar-wrapper">
					<image class="avatar" src="../../static/img/avatar.png" mode="aspectFill"></image>
				</view>
				<view class="account-info">
					<view class="tel">
						182****9811
					</view>
					<!-- <view class="badge">
						<image class="star" src="../../static/img/star.png" mode="aspectFill"></image>
						<text class="badge-txt">未认证</text>
					</view> -->
				</view>
				<view class="account-manage" @click="toAcc">
					<image class="setting-img" src="../../static/img/settings.png" mode="aspectFill"></image>
					<text class="manage-txt">安全设置</text>
				</view>
			</view>
			<view class="jumbo-footer">
				<navigator class="footer-nav" url="../orderCenter/orderCenter?active=0">
					<view>
						<image class="footer-img" src="../../static/img/all.png" mode="aspectFill" style="width: 43upx;height: 43upx;"></image>
					</view>
					<view class="footer-txt">
						全部
					</view>
				</navigator>
				<navigator class="footer-nav" url="../orderCenter/orderCenter?active=1">
					<view>
						<image class="footer-img" src="../../static/img/pay.png" mode="aspectFill" style="width: 50upx;height: 40upx;"></image>
					</view>
					<view class="footer-txt">
						待付款
					</view>
				</navigator>
				<navigator class="footer-nav" url="../orderCenter/orderCenter?active=2">
					<view>
						<image class="footer-img" src="../../static/img/send.png" mode="aspectFill" style="width: 48upx;height: 43upx;"></image>
					</view>
					<view class="footer-txt">
						待发货
					</view>
				</navigator>
				<navigator class="footer-nav" url="../orderCenter/orderCenter?active=4">
					<view>
						<image class="footer-img" src="../../static/img/finish.png" mode="aspectFill" style="width: 43upx;height: 45upx;"></image>
					</view>
					<view class="footer-txt">
						已完成
					</view>
				</navigator>
			</view>
		</view>
		<view class="nav-list">
			<navigator class="nav" url="../addressManager/addressManager">
				<view class="label">
					<image class="nav-ico" src="../../static/img/address.png" mode="aspectFill" style="width: 31upx;height: 38upx;"></image>
					<view class="nav-txt">地址管理</view>
				</view>
				<image class="arrow" src="../../static/img/arrow.png" mode="aspectFill"></image>
			</navigator>
			<navigator class="nav" url="../invoice/invoice">
				<view class="label">
					<image class="nav-ico" src="../../static/img/invoice.png" mode="aspectFill" style="width: 32upx;height: 35upx;"></image>
					<view class="nav-txt">发票管理</view>
				</view>
				<image class="arrow" src="../../static/img/arrow.png" mode="aspectFill"></image>
			</navigator>
			<navigator class="nav" url="../collection/collection">
				<view class="label">
					<image class="nav-ico" src="../../static/img/collection.png" mode="aspectFill" style="width: 35upx;height: 34upx;"></image>
					<view class="nav-txt">我的收藏</view>
				</view>
				<image class="arrow" src="../../static/img/arrow.png" mode="aspectFill"></image>
			</navigator>
			<navigator class="nav" url="../footprint/footprint">
				<view class="label">
					<image class="nav-ico" src="../../static/img/foot.png" mode="aspectFill" style="width: 30upx;height: 36upx;"></image>
					<view class="nav-txt">我的足迹</view>
				</view>
				<image class="arrow" src="../../static/img/arrow.png" mode="aspectFill"></image>
			</navigator>
			<navigator class="nav" url="../coupon/coupon">
				<view class="label">
					<image class="nav-ico" src="../../static/img/wallet.png" mode="aspectFill" style="width: 32upx;height: 31upx;"></image>
					<view class="nav-txt">我的卡包</view>
				</view>
				<image class="arrow" src="../../static/img/arrow.png" mode="aspectFill"></image>
			</navigator>
			<navigator class="nav" url="../about/about">
				<view class="label">
					<image class="nav-ico" src="../../static/img/about.png" mode="aspectFill" style="width: 34upx;height: 35upx;"></image>
					<view class="nav-txt">关于我们</view>
				</view>
				<image class="arrow" src="../../static/img/arrow.png" mode="aspectFill"></image>
			</navigator>
			<navigator class="nav" url="../feedback/feedback">
				<view class="label">
					<image class="nav-ico" src="../../static/img/feedback.png" mode="aspectFill" style="width: 31upx;height: 24upx;"></image>
					<view class="nav-txt">意见反馈</view>
				</view>
				<image class="arrow" src="../../static/img/arrow.png" mode="aspectFill"></image>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			toAcc() {
				uni.navigateTo({
					url: '../changePassword/changePassword',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style>
#mePage {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #111821;
	padding-top: 39upx;
}
.jumbo {
	width:686upx;
	height:345upx;
	background: url(../../static/img/center.png) center center no-repeat;
	background-size: cover;
	margin: 0 auto;
}
.jumbo-header {
	position: relative;
	display: flex;
}
.avatar-wrapper {
	width: 191upx;
	flex: 1 191upx 0;
}
.avatar {
	width: 119upx;
	height: 119upx;
	margin: 23upx 32upx 0 41upx;
}
.account-info {
	flex: 4;
}
.tel {
	margin: 34upx 0 21upx 0;
	font-size: 30upx;
	font-family:'PingFang SC';
	font-weight:500;
	color:rgba(17,24,33,1);
	line-height:26upx;
}
.badge {
	width: 104upx;
	height: 33upx;
	background: #111821;
	border-radius:17px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.star {
	width: 20upx;
	height: 20upx;
	margin-right: 4upx;
}
.badge-txt {
	font-size:20upx;
	font-family:'PingFang SC';
	font-weight:500;
	color:rgba(234,10,42,0.7);
	line-height:26upx;
}
.account-manage {
	position: absolute;
	width:183upx;
	height:63upx;
	background:#111821;
	border-radius:32upx 4upx 4upx 32upx;
	top: 31upx;
	right: 0;
	display: flex;
	align-items: center;
}
.setting-img {
	width: 33upx;
	height: 32upx;
	margin-left: 19upx;
}
.manage-txt {
	font-size:26upx;
	font-family:'PingFang SC';
	font-weight:500;
	color:rgba(234,10,42,1);
	margin-left: 11upx;
}
.jumbo-footer {
	display: flex;
	margin: 40upx auto 0;
	width: 600upx;
	height: 160upx;
}
.footer-txt {
	font-size:22upx;
	font-family:'PingFang SC';
	font-weight:500;
	color:rgba(17,24,33,1);
	line-height:26upx;
}
.footer-nav {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.nav-list {
	height: 735upx;
	background: #fff;
	padding: 67upx 34upx 125upx;
	box-sizing: border-box;
}
.nav {
	height: 74upx;
	border-bottom: 1upx solid rgb(237,237,237);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.nav-txt {
	font-size:24upx;
	font-family: 'PingFang SC';
	font-weight:500;
	margin-left: 18upx;
	display: inline-block;
	transform: translateY(-5upx);
}
.arrow {
	width: 13upx;
	height: 25upx;
}
</style>
